<template>
	<view class="page cp" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="船票+住宿"></c-nav-bar>
		<!-- <image :style="{'top':mt+'px'}" class="bg" src="https://i.ringzle.com/file/20231030/baa33f344ff14d049b3fc74c841d8b40.png"></image> -->
		<view class="lb bg" :style="{'top':mt+'px'}">
			<!-- <u-swiper :list="lbList" autoplay circular height="481rpx"></u-swiper> -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				style="height: 481rpx;">
				<swiper-item class="swiper-items" v-for="item,index in lbList ">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
				</swiper-item>
			</swiper>


		</view>
		<!-- 查询 -->
		<view class="box">
	
			<view class="content">
				<view class="address">
					<view>
						<text>出发地点</text>
						<text @tap="showPlace">{{departurePlace}}</text>
					</view>
					<view>
						<text>抵达地点</text>
						<text style="text-align: right;" @tap="showPlace">{{arrivalPlace}}</text>
					</view>
					<image src="https://i.ringzle.com/file/20231030/c305973a69a0494b96b557a7a30e64f6.png"
						@tap="changeFromTo" v-if="tabIndex===0"></image>
					<image src="https://i.ringzle.com/file/20231101/85e9ada3058f46d2bc8c4e14bd0fd38e.png"
						@tap="changeFromTo" v-else></image>
				</view>
				<view class="line1"></view>
				<view class="date" v-if="tabIndex===0">
					<view class="vd" @tap="toSelectSingleDate">
						<view class="text">{{departDate}}<span>{{departWeek}}</span></view>
					</view>
				</view>
				<view class="date" v-else>
					<view class="vd" @tap="toSelectSingleDate">
						<view class="text">{{departDate}}<span>{{departWeek}}去</span></view>
					</view>
					<view class="vd" @tap="toSelectSingleDate">
						<view class="text">{{returnDate}}<span>{{returnWeek}}回</span></view>
					</view>
					<view class="total_night">共{{nightNum}}晚</view>
				</view>
				<view class="line2"></view>
				<!-- <view class="type" @tap="detailsShow=true">
					<view><span
							style="margin-left: 0;">{{adultNumber}}</span>成人<span>{{childNumber}}</span>儿童<span>{{roomNumber}}</span>间
					</view>
					<image src="@/static/my/commonInformation/icon_yjt.png"></image>
				</view>
				<view class="line3"></view> -->
				<view class="submit" @click="toSearch">开始搜索</view>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="recommend">
			<view class="r_top">
				<text class="rt_title">推荐</text>
				<view class="rt_more" @tap="toMore">
					<text>更多</text>
					<image src="@/static/my/commonInformation/icon_yjt.png"></image>
				</view>
			</view>
			<view class="r_item" v-for="(item,index) in recommends" :key="index">
				<view class="ri_lb">
					<u-swiper :list="[item.cover]" @change="e => $set(recommends[index],'current',e.current)"
						:autoplay="false" :circular="true" indicatorStyle="right: 20px" height="380rpx">
						<view slot="indicator" class="indicator-num">
							<text class="indicator-num__text">{{ item.current + 1 }}/{{ [item.cover].length }}</text>
						</view>
					</u-swiper>
				</view>
				<view class="ri_info">
					<view class="rii_title">{{item.name}}</view>
					<view class="rii_tips">
						<view v-for="(t,idx) in item.featureLabelList" :key="idx">{{t}}</view>
					</view>
					<view class="rii_bottom">
						<view class="riib_price"><span>￥</span>{{item.bottomPrice}}<span class="riibp_text">起</span>
						</view>
						<view class="riib_yd" @tap="toOrder(item)">去预订</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日历 -->
		<u-calendar :title="dateTitle" :defaultDate="defaultDate" confirmDisabledText="确定" :show="dateShow"
			:mode="dateMode" @confirm="dateConfirm" @close="dateShow=false">
		</u-calendar>
		<u-popup :show="detailsShow" @close="detailsShow=false">
			<view class="details">
				<view class="title">
					<text>选择出行人数</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow=false"></image>
				</view>
				<view class="d_items">
					<view class="di_title">所需房间</view>
					<view class="di_jj">
						<image @tap="roomNum===0?0:roomNum--" class="dij_jian"
							src="https://i.ringzle.com/file/20231030/90a54f53f4f1436caaf0376b1ad28bcc.png"></image>
						<view class="dij_num">{{roomNum}}</view>
						<image @tap="roomNum++" class="dij_jia"
							src="https://i.ringzle.com/file/20231030/50035ec2b3344719b7449604f944147a.png"></image>
					</view>
				</view>
				<view class="d_items">
					<view class="di_title">成人</view>
					<view class="di_jj">
						<image @tap="adultNum===0?0:adultNum--" class="dij_jian"
							src="https://i.ringzle.com/file/20231030/90a54f53f4f1436caaf0376b1ad28bcc.png"></image>
						<view class="dij_num">{{adultNum}}</view>
						<image @tap="adultNum++" class="dij_jia"
							src="https://i.ringzle.com/file/20231030/50035ec2b3344719b7449604f944147a.png"></image>
					</view>
				</view>
				<view class="d_items">
					<view class="di_title">儿童</view>
					<view class="di_jj">
						<image @tap="childNum===0?0:childNum--" class="dij_jian"
							src="https://i.ringzle.com/file/20231030/90a54f53f4f1436caaf0376b1ad28bcc.png"></image>
						<view class="dij_num">{{childNum}}</view>
						<image @tap="childNum++" class="dij_jia"
							src="https://i.ringzle.com/file/20231030/50035ec2b3344719b7449604f944147a.png"></image>
					</view>
				</view>
				<view class="d_sure" @tap="toSure">确定</view>
			</view>
		</u-popup>
		<u-popup :show="placeShow" @close="placeShow=false">
			<view class="details">
				<view class="title">
					<text>选择航线</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="placeShow=false"></image>
				</view>
				<view class="place_box">
					<text class="pb_title">出发地点</text>
					<view class="pb_items">
						<view v-for="(item,index) in departList" :key="index" :class="didx===index?'active':''"
							@tap="selectDepart(item,index)">
							{{item}}
							<image src="https://i.ringzle.com/file/20231102/4082ad01ae52454f8df56b84c13651a8.png"
								v-if="didx===index"></image>
						</view>
					</view>
				</view>
				<view class="place_box pbl">
					<text class="pb_title">到达地点</text>
					<view class="pb_items">
						<view v-for="(item,index) in arriveList" :key="index" :class="aidx===index?'active':''"
							@tap="selectArrive(item,index)">
							{{item.endPortName}}
							<image src="https://i.ringzle.com/file/20231102/4082ad01ae52454f8df56b84c13651a8.png"
								v-if="aidx===index"></image>
						</view>
					</view>
				</view>
				<view class="hn_tip" v-if="isHn">花鸟岛入岛需购买门票，船票购买成功后建议您提前购买入岛门票</view>
				<view class="d_sure" @tap="toSurePlace">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'steamerTicketStayIndex',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				lbList: [], //https://i.ringzle.com/file/20231030/baa33f344ff14d049b3fc74c841d8b40.png
				tabIndex: 0,
				departurePlace: '',
				departurePlaceTemp: '',
				departureCode: '',
				departureCodeTemp: '',
				arrivalPlace: '',
				arrivalPlaceTemp: '',
				arrivalCode: '',
				arrivalCodeTemp: '',
				departDate: '',
				departWeek: '',
				returnDate: '',
				returnWeek: '',
				startDate: '',
				endDate: '',
				defaultDate: new Date().Format('yyyy-MM-dd'),
				dateShow: false,
				placeShow: false,
				dateMode: 'single',
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				dateTitle: '请选择入住日期',
				recommends: [],
				detailsShow: false,
				adultNumber: 1,
				childNumber: 0,
				roomNumber: 1,
				roomNum: 1,
				adultNum: 1,
				childNum: 0,
				nightNum: 1,
				placeInfo: null,
				departList: [],
				arriveList: [],
				didx: 0,
				aidx: 0,
				isHn: false //是否选中花鸟岛
			}
		},
		onReady() {
			this.dateInit();
			this.getHotels();
			this.getPlaceList();
			this.getLbList();
		},
		methods: {
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/1').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.bannerList.length > 0) this.lbList = res.data.data.bannerList;
					}
				})
			},
			dateInit() {
				// 初始化
				this.departDate = new Date().Format('MM月dd日');
				this.departWeek = '今天';
				let mt = new Date().setDate(new Date().getDate() + 1);
				this.returnDate = new Date(mt).Format('MM月dd日');
				this.returnWeek = '明天';
				this.startDate = new Date().Format('yyyy-MM-dd');
				this.endDate = new Date(mt).Format('yyyy-MM-dd');
				this.nightNum = 1;
			},
			getHotels() {
				this.$api.get('/api/hotel/getHomestayPage', {
					arriveDate: this.startDate,
					leaveDate: this.endDate,
					limit: 10,
					page: 1,
					name: '',
				}).then(res => {
					this.recommends = res.data.data.list.slice(0, 3);
					this.recommends.forEach((r, i) => this.$set(this.recommends[i], 'current', 0));
				})
			},
			// 获取出发/到达点数据
			getPlaceList() {
				this.$api.get('/travel/isshipportline/api/shipHotelList').then(res => {
					if (res.data.code === 0) {
						if (!res.data.data) return;
						this.placeInfo = res.data.data;
						for (let p in this.placeInfo) {
							this.departList = [...this.departList, p];
						}
						this.arriveList = this.placeInfo[this.departList[0]];
						this.departurePlace = this.departList[0];
						this.departureCode = this.placeInfo[this.departList[0]][0].startPortNum;
						this.arrivalPlace = this.arriveList[0].endPortName;
						this.arrivalCode = this.arriveList[0].endPortNum;

						if (this.arrivalPlace.indexOf('花鸟') > -1) this.isHn = true;
						else this.isHn = false;
					} else this.$showModal(res.data.msg)
				})
			},
			changeTab(index) {
				this.tabIndex = index;
				if (this.tabIndex === 0) {
					this.dateMode = 'single';
					this.defaultDate = null;
					this.dateTitle = '请选择入住日期';
				} else {
					this.dateMode = 'range';
					this.defaultDate = [];
					this.dateTitle = '请选择入住离店日期';
				}
				this.dateInit();
			},
			toSelectSingleDate() {
				this.dateShow = true;
			},
			dateConfirm(e) {
				this.dateShow = false;
				if (this.tabIndex === 0) {
					this.departDate = new Date(e[0]).Format('MM月dd日');
					let mt = new Date().setDate(new Date().getDate() + 1);
					if (this.departDate == new Date().Format('MM月dd日')) this.departWeek = '今天'
					else if (this.departDate == new Date(mt).Format('MM月dd日')) this.departWeek = '明天'
					else this.departWeek = this.week[new Date(e[0]).getDay()];
					this.startDate = e[0];
					this.endDate = new Date(new Date().setDate(new Date(this.startDate).getDate() + 1)).Format(
						'yyyy-MM-dd');
					this.nightNum = 1;
				} else {
					this.departDate = new Date(e[0]).Format('MM月dd日');
					let mt = new Date().setDate(new Date().getDate() + 1);
					if (this.departDate == new Date().Format('MM月dd日')) this.departWeek = '今天'
					else if (this.departDate == new Date(mt).Format('MM月dd日')) this.departWeek = '明天'
					else this.departWeek = this.week[new Date(e[0]).getDay()];
					this.returnDate = new Date(e[e.length - 1]).Format('MM月dd日');
					if (this.returnDate == new Date().Format('MM月dd日')) this.returnWeek = '今天'
					else if (this.returnDate == new Date(mt).Format('MM月dd日')) this.returnWeek = '明天'
					else this.returnWeek = this.week[new Date(e[e.length - 1]).getDay()];
					this.startDate = e[0];
					this.endDate = e[e.length - 1];
					this.nightNum = Math.floor((new Date(this.endDate).getTime() - new Date(this.startDate).getTime()) / (
						24 * 60 * 60 * 1000));
				}
			},
			//交换出发和到达港口
			changeFromTo() {
				let dtemp = JSON.parse(JSON.stringify(this.departurePlace));
				let dtempcode = JSON.parse(JSON.stringify(this.departureCode));
				let atemp = JSON.parse(JSON.stringify(this.arrivalPlace));
				let atempcode = JSON.parse(JSON.stringify(this.arrivalCode));
				this.departurePlace = atemp;
				this.departureCode = atempcode;
				this.arrivalPlace = dtemp;
				this.arrivalCode = dtempcode;
			},
			//开始搜索
			toSearch() {
				let params = {
					arrveList: this.arriveList,
					type: this.tabIndex, //0：单程 1：往返
					startDate: this.startDate, //开始日期 yyyy-MM-dd格式
					endDate: this.endDate, //返回日期 yyyy-MM-dd格式
					fromPlace: this.departurePlace, //出发地点
					fromCode: this.departureCode, //出发地点code
					toPlace: this.arrivalPlace, //抵达地点
					toCode: this.arrivalCode, //抵达地点code
					adultNumber: this.adultNumber, //成人数
					roomNumber: this.roomNumber, //房间数
					childNumber: this.childNumber //儿童数
				};
				uni.setStorageSync('cpzsParams', JSON.stringify(params));
				uni.navigateTo({
					url: '/pagesIndex/searchOrder/searchOrder'
				})
			},
			//跳转更多
			toMore() {
				uni.navigateTo({
					url: '/pagesTrip/hotel/index'
				})
			},
			//去预订
			toOrder(item) {
				uni.navigateTo({
					url: "/pagesTrip/hotel/details/index?list=" + JSON.stringify([{
						homestayId: item.id,
						name: item.name,
						arriveDate: this.startDate,
						leaveDate: this.endDate,
						limit: 10,
						name: "",
						page: 1
					}])
				})
			},
			// 去酒店详情

			toSure() {
				this.adultNumber = this.adultNum;
				this.roomNumber = this.roomNum;
				this.childNumber = this.childNum;
				this.detailsShow = false;
			},
			showPlace() {
				this.placeShow = true;
				this.departurePlaceTemp = this.departurePlace;
				this.departureCodeTemp = this.departureCode;
				this.arrivalPlaceTemp = this.arrivalPlace;
				this.arrivalCodeTemp = this.arrivalCode;
				this.didx = this.departList.findIndex(d => d == this.departurePlace);
				this.aidx = this.arriveList.findIndex(a => a.endPortName == this.arrivalPlace);
			},
			selectDepart(item, index) {
				this.didx = index;
				this.departurePlaceTemp = item;
				this.departureCodeTemp = this.placeInfo[item][0].startPortNum;
				this.arriveList = this.placeInfo[item];
				this.aidx = 0;
				this.arrivalPlaceTemp = this.arriveList[0].endPortName;
				this.arrivalCodeTemp = this.arriveList[0].endPortNum;

				if (this.arrivalPlaceTemp.indexOf('花鸟') > -1) this.isHn = true;
				else this.isHn = false;
			},
			selectArrive(item, index) {
				this.aidx = index;
				this.arrivalPlaceTemp = item.endPortName;
				this.arrivalCodeTemp = item.endPortNum;

				if (item.endPortName.indexOf('花鸟') > -1) this.isHn = true;
				else this.isHn = false;
			},
			toSurePlace() {
				this.departurePlace = this.departurePlaceTemp;
				this.departureCode = this.departureCodeTemp;
				this.arrivalPlace = this.arrivalPlaceTemp;
				this.arrivalCode = this.arrivalCodeTemp;
				this.placeShow = false;
			}
		}
	}
</script>
<style lang="scss">
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
</style>
<style scoped lang="less">
	/deep/.u-popup__content {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}

	.page {
		background-color: #F5F8FA;

		.bg {
			width: 100%;
			height: 481rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.box {
			width: calc(100% - 48rpx);
			margin: 291rpx 0 0 24rpx;
			border-radius: 24rpx;
			position: relative;
			z-index: 3;

			.tab {
				width: 100%;
				height: 90rpx;
				background: rgba(255, 255, 255, .88);
				border-top-left-radius: 24rpx;
				border-top-right-radius: 24rpx;
				display: flex;
				align-items: center;

				&>view {
					width: 50%;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					position: relative;

					&.t_active::after {
						content: '';
						position: absolute;
						width: 128rpx;
						height: 6rpx;
						background: #007A69;
						border-radius: 2rpx;
						left: 50%;
						margin-left: -64rpx;
						top: 84rpx;
						z-index: 1;
					}

					text {
						position: relative;
						z-index: 2;
					}

					image {
						width: calc(100% + 53rpx);
						height: 100rpx;
						position: absolute;
						bottom: 0;
						z-index: 0;

						&.limg {
							left: 0;
						}

						&.rimg {
							right: 0;
						}
					}
				}
			}

			.content {
				padding: 0 30rpx 48rpx;
				background: #fff;
				// border-bottom-left-radius: 24rpx;
				// border-bottom-right-radius: 24rpx;
				border-radius: 24rpx;
				overflow: hidden;

				.address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					margin-top: 64rpx;

					&>view {
						display: flex;
						flex-direction: column;

						text {
							&:first-child {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #808080;
								line-height: 24rpx;
							}

							&:last-child {
								font-size: 36rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 36rpx;
								margin-top: 24rpx;
							}
						}
					}

					image {
						width: 64rpx;
						height: 64rpx;
						position: absolute;
						top: 50%;
						margin-top: -32rpx;
						left: 50%;
						margin-left: -32rpx;
					}
				}

				.line1 {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
					margin: 36rpx 0 27rpx;
				}

				.date {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;

					.total_night {
						position: absolute;
						width: 98rpx;
						height: 48rpx;
						border-radius: 24rpx;
						border: 2rpx solid #EFEFEF;
						line-height: 48rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						left: 50%;
						margin-left: -49rpx;
						top: 50%;
						margin-top: -24rpx;
					}

					.vd {
						display: flex;
						align-items: center;

						.text {
							display: flex;
							align-items: center;
							font-size: 36rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #111111;

							span {
								margin: 9rpx 0 0 24rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}
				}

				.line2 {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
					margin: 35rpx 0 28rpx;
				}

				.type {
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;

						span {
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #111111;
							margin: 0 4rpx;
						}
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}


				.line3 {
					width: 100%;
					height: 1rpx;
					background: #EFEFEF;
					margin-top: 34rpx;
				}

				.submit {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(90deg, #FF7D43 0%, #FFA414 100%);
					border-radius: 44rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					margin-top: 48rpx;
					letter-spacing: 2rpx;
				}
			}
		}

		.recommend {
			width: calc(100% - 48rpx);
			margin: 48rpx 24rpx 0;
			padding-bottom: 48rpx;

			.r_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 28rpx;

				.rt_title {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;
				}

				.rt_more {
					display: flex;
					align-items: center;

					text {
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}

					image {
						margin-left: 8rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.r_item {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.ri_lb {
					width: 100%;
					height: 380rpx;
					border-top-left-radius: 16rpx;
					border-top-right-radius: 16rpx;
				}

				.ri_info {
					padding: 24rpx;

					.rii_title {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
					}

					.rii_tips {
						margin-top: 24rpx;
						overflow: hidden;

						&>view {
							float: left;
							height: 38rpx;
							border-radius: 8rpx;
							border: 1rpx solid #EEEEEE;
							line-height: 38rpx;
							text-align: center;
							padding: 0 8rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 24rpx;

							&:first-child {
								margin-left: 0;
							}
						}
					}

					.rii_bottom {
						margin-top: 23rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.riib_price {
							display: flex;
							align-items: center;
							font-size: 48rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #FF4141;

							span {
								font-size: 31rpx;
								font-family: DINAlternate-Bold, DINAlternate;
								font-weight: bold;
								color: #FF4141;
								margin-right: 4rpx;
								margin-top: 8rpx;

								&.riibp_text {
									margin-right: 0;
									margin-left: 6rpx;
								}
							}
						}

						.riib_yd {
							height: 60rpx;
							background:#007A69;
							border-radius: 30rpx;
							padding: 0 35rpx;
							line-height: 60rpx;
							text-align: center;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.details {
			padding: 33rpx 24rpx 200rpx;
			min-height: 600rpx;

			.title {
				position: relative;
				text-align: center;
				margin-bottom: 28rpx;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.d_items {
				height: 100rpx;
				background: #F5F8FA;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				margin-top: 20rpx;

				.di_title {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.di_jj {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					.dij_num {
						width: 77rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}
				}
			}

			.place_box {
				border-top: 1rpx solid #EFEFEF;
				padding-top: 45rpx;

				&.pbl {
					padding-top: 60rpx;
					border-top: none;
				}

				.pb_title {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.pb_items {
					overflow: auto;
					margin-top: 40rpx;
					max-height: 300rpx;

					&>view {
						float: left;
						margin: 0 0 20rpx 10rpx;
						width: calc(33.33% - 12rpx);
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 2rpx solid #EFEFEF;
						line-height: 80rpx;
						text-align: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						position: relative;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;

						&:nth-child(3n+1) {
							margin-left: 0;
						}

						&.active {
							border: 2rpx solid #007A69;
							color: #01B9F9;
						}

						image {
							width: 34rpx;
							height: 26rpx;
							position: absolute;
							right: 0;
							bottom: 0;
						}
					}
				}
			}

			.hn_tip {
				width: calc(100% + 48rpx);
				margin-left: -24rpx;
				background: #FFF3E8;
				padding: 15rpx 27rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FF7D01;
				line-height: 36rpx;
				margin-top: 8rpx;
			}

			.d_sure {
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 44rpx;
				position: fixed;
				bottom: 48rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}
	}
</style>
<style>
	.cp .u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>